@column: 12;

.component-container {
    display: grid;
    grid-template-columns: repeat(@column, 1fr);
    row-gap: 24px;
    column-gap: 24px;
}

// 默认两列布局
.component-wrapper {
    grid-column-start: span @column / 2;
}

// 显示1列
.column-1 {
    grid-column-start: span @column;
}
// 显示2列
.column-2 {
    grid-column-start: span @column / 2;
}
// 显示3列
.column-3 {
    grid-column-start: span @column / 3;
}
// 显示4列
.column-4 {
    grid-column-start: span @column / 4;
}